<template>
  <div>
    <el-backtop :right="100" :bottom="200" :visibility-height="10" />
    <!-- 搜索 -->
    <el-space wrap style="margin-bottom:10px">
      <el-input v-model="name" placeholder="请输入管理员名称" clearable />
      <el-button type="primary" :icon="Search" @click="listData">查找</el-button>
      <el-button type="primary" :icon="Edit" @click="adminAdd">添加</el-button>
    </el-space>
    <!-- 列表 -->
    <el-table :data="tableData" style="width: 80%" border>
      <el-table-column prop="id" label="管理员ID" align="left" />
      <el-table-column prop="username" label="管理员名称" align="left" />
      <el-table-column prop="realname" label="真实姓名" align="left" />
      <el-table-column prop="phone" label="电话" align="left" />
      <el-table-column prop="roleIds" label="管理员角色" align="left">
        <template #default="scope">
          <el-tag
            v-show="scope.row.roleIds"
            :type="scope.row.roleIds? '' : 'success'"
            v-for="item,i in scope.row.roleIds"
            :key="i"
            disable-transitions
          >{{item==0?'超级管理员':(item==1?'测试2':(item==2?'市场2':'测试'))}}</el-tag>
          <!-- disable-transitions   tag是否禁用渐变动画  默认是false-->
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改弹框 -->
    <el-dialog v-model="dialogFormVisible" :title="title">
      <el-form ref="ruleFormRef" :rules="rules" label-width="120px" status-icon :model="form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" :disabled="title=='编辑'" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realname">
          <el-input v-model="form.realname" />
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-select
            v-model="form.roleIds"
            multiple
            filterable
            allow-create
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择角色"
          >
            <el-option v-for="item,i in roleName" :key="i" :label="item.name" :value="i" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="fangdou">{{title =='创建'? '新增':'修改'}}</el-button>
          <el-button @click="chonzhhi">重置</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <dome v-bind="domes" @limits="limits" @pages="pages" />
  </div>
</template>
<script>
import { post } from "@/util/http";
import dome from "@/components/DomeAndTop.vue";
import { Search, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { debounce } from "@/fangdou/fangdou";//防抖fangdou
export default {
  components: {
    dome,
  },
  data() {
    return {
      Search,
      Edit,
      name: "", //搜索
      tableData: [], //列表
      title: "", //弹框标题
      dialogFormVisible: false, //布尔值
      form: {
        //弹框表单
        username: "",
        password: "",
        phone: "",
        realname: "",
        roleIds: {},
      },
      role: [],
      adminRole: "", //管理员角色
      adminId: "", //当前管理员ID
      roleName: [], //弹框角色
      // 分页
      domes: {
        limit: 10,
        page: 1,
        total: 10,
      },
      //表单验证规则
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "长度应该是2到5",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "长度应该是11",
            trigger: "blur",
          },
        ],
        realname: [
          {
            required: true,
            message: "请输入真实性名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.listData();
  },
  methods: {
    // 角色列表
    Desc() {
      let logdata = {
        _gp: "admin.role",
        _mt: "list",
      };
      post(logdata).then((res) => {
        if (200 == res.data.errno) {
          this.roleName = res.data.data.items;
        }
      });
    },
    // 弹框提交
    subMit() {
      // if (!ruleFormRef) return;
      // 表单验证
      this.$refs.ruleFormRef.validate((ref) => {
        if (ref) {
          if (this.title == "创建") {
            let data = {
              _gp: "admin",
              _mt: "create",
              adminDTO: JSON.stringify(this.form),
            };
           post(data)
              .then((res) => {
                if (200 == res.data.errno) {
                  console.log(res, "创建成功");
                  this.dialogFormVisible = false;
                  this.form = {
                    username: "",
                    password: "",
                    phone: "",
                    realname: "",
                  };
                  this.listData();
                  ElMessage.success("创建成功");
                }
              })
              .catch((err) => {
                ElMessage.error(err.data.errmsg);
              });
          } else {
            let data = {
              _gp: "admin",
              _mt: "edit",
              adminDTO: JSON.stringify(this.form),
              adminId:this.adminId
            };
            post(data)
              .then((res) => {
                console.log("修改成功");
                if (200 == res.data.errno) {
                  console.log(res, "修改成功");
                  this.dialogFormVisible = false;
                  this.form = {
                    username: "",
                    password: "",
                    phone: "",
                    realname: "",
                  };
                  this.listData();
                  ElMessage.success("修改成功");
                }
              })
              .catch((err) => {
                console.log("修改失败");
                ElMessage.error(err.data.errmsg);
              });
          }
        } else {
          ElMessage.warning("带星号的信息不能为空!");
        }
      });
    },
    fangdou: debounce(function () {
      this.subMit();
    }),
    // 管理员添加
    adminAdd() {
      this.form = {
        username: "",
        password: "",
        phone: "",
        realname: "",
      };
      this.dialogFormVisible = true;
      this.title = "创建";
      this.Desc();
    },
    // 管理员修改
    handleEdit(index, e) {
      this.form = {
        username: "",
        password: "",
        phone: "",
        realname: "",
      };
      this.dialogFormVisible = true;
      this.title = "编辑";
      this.form = {
        id: e.id,
        username: e.username,
        password: e.password,
        phone: e.phone,
        realname: e.realname,
        roleIds: e.roleIds,
        // adminId: e.id,
      };
      this.Desc();
    },
    // 管理员删除
    handleDelete(index, e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let data = {
            _gp: "admin",
            _mt: "delete",
            id: e.id,
          };
         post(data).then((res) => {
            if (200 == res.data.errno) {
              this.tableData.splice(index, 1);
              ElMessage.success("删除成功!");
              this.listData();
            }
          });
        })
        .catch(() => {
          ElMessage.info("已取消删除");
        });
    },
    Role(e) {
      for (const key in e) {
        switch (e[key]) {
          case 1:
            this.adminRole = "超级管理员";
            break;
          case 2:
            this.adminRole = "测试2";
            break;
          case 3:
            this.adminRole = "市场2";
            break;
          case 4:
            this.adminRole = "测试";
            break;

          default:
            break;
        }
      }

    },
    // 管理员列表
    listData() {
      let data = {
        _gp: "admin",
        _mt: "list",
        username: this.name,
        page: this.domes.page,
        limit: this.domes.limit,
      };
      post(data)
        .then((res) => {
          if (200 == res.data.errno) {
            console.log(res.data.data.items, "管理员");
            this.tableData = res.data.data.items;
          }
        })
        .catch((err) => {
          ElMessage.error(err.data.errmsg);
        });
    },
    limits(e) {
      this.domes.limit = e;
      this.$nextTick(()=>{
        this.listData();
      })
    },
    pages() {
      this.domes.page = e;
      this.$nextTick(()=>{
        this.listData();
      })
    },
  },
};
</script>